<template>
  <div class="base-wrap">
    <el-divider content-position="left">支付状态</el-divider>
    <el-form ref="form" :model="form" label-width="100px">
      <div class="el-form-item__content100">
        <el-form-item style="width: 40%;" label="开启支付功能">
          <el-switch v-model="form.open"></el-switch>
        </el-form-item>
        <el-tabs v-model="activeName">
          <el-tab-pane label="默认支付方式" name="first">
            <el-radio-group v-model="defaultPay">
              <el-radio-button label="微信"></el-radio-button>
              <el-radio-button label="支付宝"></el-radio-button>
              <el-radio-button label="货到付款"></el-radio-button>
              <el-radio-button label="到店支付"></el-radio-button>
              <el-radio-button label="余额支付"></el-radio-button>
            </el-radio-group>
            <div class="caption">说明</div>
          </el-tab-pane>
          <el-tab-pane label="支付方式管理" name="second">
            <el-checkbox-group v-model="checkboxGroup1">
              <el-checkbox style="display: block;max-width: 300px;line-height: 44px;" label="微信"></el-checkbox>

              <el-checkbox style="display: block;max-width: 300px;line-height: 44px;" label="支付宝"></el-checkbox>

              <el-checkbox style="display: block;max-width: 300px;line-height: 44px;" label="货到付款"></el-checkbox>

              <el-checkbox style="display: block;max-width: 300px;line-height: 44px;" label="到店支付"></el-checkbox>

              <el-checkbox style="display: block;max-width: 300px;line-height: 44px;" label="余额支付"></el-checkbox>
            </el-checkbox-group>

            <el-button style="margin-top: 20px" type="primary">保存</el-button>
          </el-tab-pane>
          <el-tab-pane label="支付方式配置" name="third">
            <el-tabs v-model="payTab">
              <el-tab-pane label="微信" name="WeChat" style="width: 90%;">
                <el-form ref="form" :model="weChatForm" label-width="200px">
                  <el-form-item label="公众号 APPID">
                    <el-input v-model="form.app_id"></el-input>
                  </el-form-item>
                  <el-form-item label="小程序 APPID">
                    <el-input v-model="form.miniapp_id"></el-input>
                  </el-form-item>
                  <el-form-item label="APP 引用的 appid">
                    <el-input v-model="form.appid"></el-input>
                  </el-form-item>
                  <el-form-item label="微信支付分配的微信商户号">
                    <el-input v-model="form.mch_id"></el-input>
                  </el-form-item>
                  <el-form-item label="微信支付异步通知地址">
                    <el-input v-model="form.notify_url"></el-input>
                  </el-form-item>
                  <el-form-item label="微信支付签名秘钥">
                    <el-input v-model="form.key"></el-input>
                  </el-form-item>
                  <el-form-item label="客户端证书路径">
                    <el-input v-model="form.cert_client"></el-input>
                  </el-form-item>
                  <el-form-item label="客户端秘钥路径">
                    <el-input v-model="form.cert_key"></el-input>
                  </el-form-item>

                  <el-form-item>
                    <el-button type="primary">保存</el-button>
                    <el-button>取消</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="支付宝" name="Alipay" style="width: 90%;">
                <el-form ref="form" :model="alipayForm" label-width="200px">
                  <el-form-item label="支付宝分配的 APPID">
                    <el-input v-model="form.app_id"></el-input>
                  </el-form-item>
                  <el-form-item label=" 支付宝异步通知地址">
                    <el-input v-model="form.notify_url"></el-input>
                  </el-form-item>
                  <el-form-item label="支付成功后同步通知地址">
                    <el-input v-model="form.return_url"></el-input>
                  </el-form-item>
                  <el-form-item label=" 阿里公共密钥">
                    <el-input v-model="form.ali_public_key"></el-input>
                  </el-form-item>
                  <el-form-item label="自己的私钥">
                    <el-input v-model="form.private_key"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary">保存</el-button>
                    <el-button>取消</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Base",
  data() {
    return {
      defaultPay: "",
      form: {
        open: true
      },
      checkboxGroup1: ["微信"],
      cities: ["微信", "支付宝", "货到付款", "到店支付"],
      activeName: "second",
      payTab: "WeChat",
      weChatForm: {
        app_id: "",
        miniapp_id: "",
        appid: "",
        mch_id: "",
        notify_url: "",
        key: "",
        cert_client: "",
        cert_key: ""
      },
      alipayForm: {
        app_id: "",
        notify_url: "",
        return_url: "",
        ali_public_key: "",
        private_key: ""
      }
    };
  }
};
</script>
<style lang="less" scoped>
.caption {
  margin: 40px 0 0 0;
  width: 600px;
  height: 300px;
  background-color: #f5f7fa;
  padding: 24px;
  border-radius: 3px;
  border: 1px solid #ebebeb;
}
</style>
